<template>
  <view class="broadband_card">
    <view
      class="card_box"
      v-for="item in listData"
      :key="item.accountNumber"
      @tap="onClick(item)"
    >
      <view class="left">{{ item.accountNumber }}</view>
      <view
        class="right"
        :class="
          item.status == '0' ? 'didNot' : item.status == '2' ? 'stop' : ''
        "
        >{{
          item.status == "0" ? "未办理" : item.status == "1" ? "办理中" : "已办理"
        }}</view
      >
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";
const props = defineProps({
  listData: {
    type: Array,
  },
});
const emit = defineEmits("on-click");
function onClick(item) {
  emit("on-click", item);
}
</script>

<style lang="less" scoped>
.broadband_card {
  margin-top: 200rpx;
  width: 100vw;
  background-color: @color-font;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  .card_box {
    width: 90%;
    height: 96rpx;
    line-height: 96rpx;
    font-weight: 400;
    font-size: 31rpx;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid @color-line;
    margin-bottom: 20rpx;
    .left {
      color: @color-black-text;
    }
    .right {
      padding: 0 20rpx;
      &.didNot {
        color: #ff934c;
      }
      &.stop {
        color: @color-green;
      }
    }
  }
}
</style>